<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table 组件综合演示 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="layui/css/layui.css" rel="stylesheet">
  <style>
    table img {
      height: 30px;
    }
  </style>
</head>
<body>

<!--搜索的表单-->
<form class="layui-form" action="">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-inline" style="width: 100px;">
        <select name="states" >
          <option value=""></option>
          <option value="0">待支付</option>
          <option value="1">已支付</option>
          <option value="2">已完成</option>
          <option value="3">已取消</option>
        </select>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">价格区间</label>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="priceMin" placeholder="￥" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="priceMax" placeholder="￥" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">时间区间</label>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="timeMin"  id="timeMin" placeholder="开始时间" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="timeMax" id="timeMax" placeholder="结束时间" autocomplete="off" class="layui-input">
      </div>
    </div>
    <button class="layui-btn" lay-submit lay-filter="souBtn">立即提交</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
  </div>
</form>

<!--添加的表单-->
<form class="layui-form" action=""  style="display: none; padding: 15px;"  id="addForm">
  <div class="layui-form-item">
    <label class="layui-form-label">桌号</label>
    <div class="layui-input-block">
      <input type="text" name="deskId" required  lay-verify="required" placeholder="请输入餐桌号" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">人数</label>
    <div class="layui-input-inline">
      <input type="number" name="propleCount" required lay-verify="required" placeholder="请输入人数" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">备注</label>
    <div class="layui-input-inline">
      <input type="text" name="descr" required lay-verify="required" placeholder="请输入备注" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">总价</label>
    <div class="layui-input-inline">
      <input type="number" name="total" required lay-verify="required" placeholder="请输入总价" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>




<!--修改的表单 -->
<form class="layui-form" action=""  style="display: none; padding: 15px;"  id="updateForm" lay-filter="updateForm">
  <div class="layui-form-item">
    <label class="layui-form-label">id</label>
    <div class="layui-input-block">
      <input type="text" name="id" readonly required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">桌号</label>
    <div class="layui-input-block">
      <input type="text" name="deskId" required  lay-verify="required" placeholder="请输入餐桌号" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">人数</label>
    <div class="layui-input-inline">
      <input type="number" name="propleCount" required lay-verify="required" placeholder="请输入人数" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">备注</label>
    <div class="layui-input-inline">
      <input type="text" name="descr" required lay-verify="required" placeholder="请输入备注" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">总价</label>
    <div class="layui-input-inline">
      <input type="number" name="total" required lay-verify="required" placeholder="请输入总价" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo2">立即修改</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<!--修改的表单结束-->

<!--表格容器 订单-->
<div style="padding: 16px;">
  <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<!--表格容器 详情-->
<div style="padding: 16px; display: none" id="detailDiv">
  <table class="layui-hide" id="detailTab" lay-filter="detailTab"></table>
</div>

<!--头部工具条-->
<!-- <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script> -->


<!--行内工具条-->
<script type="text/html" id="toolDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="cal">取消</a>
    <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="detail">查看详情</a>
  </div>
</script>






<script src="layui/layui.js"></script>
<script>
  layui.use(['table', 'dropdown'], function(){
    var table = layui.table;
    var dropdown = layui.dropdown;
    var $ = layui.$;
    var form = layui.form;
    var laydate = layui.laydate;

    // 渲染
    laydate.render({
      elem: '#timeMin',
      type: 'datetime'
    });
    // 渲染
    laydate.render({
      elem: '#timeMax',
      type: 'datetime'
    });


    //监听提交
    form.on('submit(souBtn)', function(data){
      // layer.msg(JSON.stringify(data.field));
      //向服务端发送请求----表格重载
      table.reload("test",{where:data.field});
      return false;
    });


    //监听提交----添加
    form.on('submit(formDemo)', function(data){
      // 向服务端发送请求
      $.ajax({
        url:'/orders/',
        type:'post',
        data:JSON.stringify(data.field),
        contentType:'application/json',
        dataType:'json',
        success:function(res){
          layer.closeAll();
          table.reload("test",{});
        }
      })
      return false;
    });

    //监听提交----修改
    form.on('submit(formDemo2)', function(data){
      // 向服务端发送请求
      $.ajax({
        url:'/orders/',
        type:'put',
        data:JSON.stringify(data.field),
        contentType:'application/json',
        dataType:'json',
        success:function(res){
          layer.closeAll();
          table.reload("test",{});
        }
      })
      return false;
    });


    // 创建渲染实例
    table.render({
      elem: '#test',
      url: '/orders/', // 此处为静态模拟数据，实际使用时需换成真实接口
      toolbar: '#toolbarDemo',
      cellMinWidth: 80,
      page: true, //分页
      cols: [[
        {type: 'checkbox', fixed: 'left'},
        {field:'id', fixed: 'left', width:80, title: 'ID', sort: true, totalRow: '合计：'},
        {field:'deskId', width:180, title: '餐桌号'},
        {field:'propleCount', width:180, title: '人数'},
        {field:'descr', width:180, title: '备注'},
        {field:'total', width:180, title: '总价'},
        {field:'states', width:180, title: '状态', templet: function(d) {
            if(d.states == 0) {
              return '<span style="color: red">待支付</span>';
            } else if(d.states == 1) {
              return '<span style="color: green">已支付</span>';
            } else if(d.states == 2) {
              return '<span style="color: blue">已完成</span>';
            } else if(d.states == 3) {
              return '<span style="color: gray">已取消</span>';
            }
          }},
        {field:'orderTime', width:180, title: '下单时间'},
        {field:'payTime', width:180, title: '支付时间'},
        {field:'finialTime', width:180, title: '完成时间'},
        {field:'calTime', width:180, title: '评价时间'},

        {fixed: 'right', title:'操作', width: 134, minWidth: 125, templet: '#toolDemo'}
      ]]
    });




    // 工具栏事件
    table.on('toolbar(test)', function(obj){
      var id = obj.config.id;
      var checkStatus = table.checkStatus(id);
      var othis = lay(this);
      switch(obj.event){
        case 'add':
          //重置表单
          $('#addForm')[0].reset();
          layui.form.render();

          //弹窗
          layer.open({
            title: '新增',
            type: 1,
            area: ['80%','80%'],
            content: $("#addForm")
          });
          break;
      };
    });


    // 触发单元格工具事件
    table.on('tool(test)', function(obj){ // 双击 toolDouble
      var data = obj.data; // 获得当前行数据
      // console.log(obj)
      if (obj.event === 'cal') {
        layer.confirm("您确定要取消吗？",function(){
          //向服务端发送请求，修改订单的状态为 "已取消"
          var param = {'id':data.id, 'states':3}
          $.ajax({
            url:'/orders/',
            type:'put',
            data:JSON.stringify(param),
            contentType:'application/json',
            dataType:'json',
            success:function(res){
              layer.closeAll();
              table.reload("test",{});
            }
          })
        })
      } else if (obj.event === 'detail') {
        //渲染表格----详情
        table.render({
          elem: '#detailTab',
          url: '/order-detail/?orderId='+data.id,
          cols: [[
            {field:'id', fixed: 'left', width:80, title: 'ID',},
            {field:'orderId', width:180, title: '订单id'},
            {field:'proName', width:180, title: '产品名'},
            {field:'proPrice', width:80, title: '价格'},
            {field:'proImg', width:180, title: '图片' ,templet:'<div> <img src="/showPic/{{d.proImg}}"/>   </div>'},
            {field:'num', width:80, title: '数量'},
          ]]
        });

        //弹窗
        layer.open({
          title: '订单'+ data.id+'详情',
          type: 1,
          area: ['80%','80%'],
          content: $("#detailDiv")
        });
      }
    });

  });
</script>
</body>
</html>